<template>
	<div class="pay-once abs full">
		<div class="rel full overflow-x-hidden">
			<div class="pay-once-header">
				经典版评价报告
			</div>
			<product-header :detail="detail.INSURANCE" v-if="detail && detail.INSURANCE" :pay="true"></product-header>
			<div class="pay-once-text">
				<p>完成支付后，在售平安重大疾病保险1680的经典版的评价告会出现在<span>我的报告</span>里面，您可以在3天内无限次阅读。</p>
				<div class="grey-blank"></div>
				<div @click="goToPage('/pay-month')">
					<h3>您还可以<span>包月支付</span></h3>
					<p class="nopadding">开通包月后，您将享受到优质服务，注册用户只能享受基本服务哦~</p>
				</div>
				<h2>支付金额&nbsp;:&nbsp;<span v-if="costList[0]" v-text="costList[0].membershipCost"></span>元</h2>
				<button @click="weixinPay()">现在支付</button>
			</div>
		</div>
	</div>
</template>

<script>
import ProductHeader from '@/components/product-header/product-header'
export default {
	name: 'pay-once',
	components: {
		ProductHeader
	},
	data() {
		return {
			costList:[],
			detail:{}
		}
	},
	mounted() {
		// 为方便调试把this暴露在Vue原型链下
		this.$pages.payOnce = this;
		let that=this;
		this.getCostList();
	},
	activated() {
		document.title = '支付';
		this.getEvaluation();
	},
	deactivated() {
		this.detail={};
	},
	methods: {
		// 调接口获取指定id的综合评价
		getEvaluation(){
			let that=this;
			let id=this.$route.query.id;
			if(!id){
				this.showToast('出错了(保险id为空)','warning');
				return;
			}
			let ifCached=this.ifCached(id);
			if(ifCached){
				that.detail=ifCached;
				console.log('综合评价详情↓');
				console.log(this.detail);
			} else {
				// 判断是否有customerId
				let customerId=this.$util.getCustomerId();
				if(!customerId){
					return;
				}
				this.$util.ajax('/evaluation/comprehensiveEvaluation','post',{
					customerId: customerId,
					insuranceId: id
				}).then(function(res){
					if(res.code=='100000'){
						that.$set(that,'detail',res.data);
						let detail=that.$store.detail;
						detail.unshift(res.data);
						detail=detail.slice(0,5);
						console.log('综合评价详情↓');
						console.log(that.detail);
					}
				});
			}
		},
		// 获取url参数中的保险ID,先去$store中查询是否有缓存
		ifCached(id){
			let detail=this.$store.detail;
			if(detail.length==0){
				return false;
			}
			for(let i=0; i<detail.length; i++){
				if(detail[i].INSURANCE.PRODUCT_ID==id){
					return detail[i];
					break;
				}
			}
		},
		// 获取会员价格信息列表
		getCostList(){
			let that=this;
			let customerId=this.$util.getCustomerId();
			if(!customerId){
				return;
			}
			let json={
				customerId,
				membershipCostType:'once'
			}
			this.$util.ajax('/membership/costs/list','post',json).then(function(res){
				if(res.code=='100000'){
					that.costList=res.data;
				}
			})
		},
		// 微信支付
		weixinPay(){
			let that=this;
			let id=this.$route.query.id;
			let customerId=this.$util.getCustomerId();
			if(!customerId){
				return;
			}
			let json={
				customerId,
				membershipCostCode: that.costList[0].membershipCostCode,
				insuranceId: id
			};
			this.$util.ajax('/wechat/order/create','post',json,'filter').then(function(res){
				if(res.code=='100000'){
					let json2=res.data;
					window.WeixinJSBridge && WeixinJSBridge.invoke(
						'getBrandWCPayRequest',
						json2,
						function(res){
							if(res.err_msg == "get_brand_wcpay_request:ok") {
								that.$router.replace('/pay-history');
							} else if(res.err_msg == "get_brand_wcpay_request:fail" || res.err_msg == "get_brand_wcpay_request:cancel"){
								window.ui && window.ui.showToast('支付未完成','');
							}
						}
					);
				} else if(res.code=='200005'){
					that.hideToast();
					that.showAlert('请先绑定手机号再购买会员',
						function(){
							that.$router.push('/bind-mobile')
						},
						function(){},
						'去绑定'
					);

				}
			})
		},
		// 跳转到指定的路由
		goToPage(route){
			this.$router.push(route);
		}
	},
}
</script>

<style scoped>
.pay-once {
	background-color: #fff;
}
.pay-once-header{
	height: 1.23rem;
	width: 100%;
	color: #333;
	font-size: 0.36rem;
	text-align: center;
	line-height: 1.23rem;
	border-bottom: 0.01rem solid #fff;
	background-color: rgba(240, 238, 244, .6);
}
.pay-once-content{
	height: 1.13rem;
	background-color: #5398f5;
	padding-left: 0.45rem;
	padding-top: 0.2rem;
}
.pay-once-content h2,.pay-once-content p{
	margin: 0;
}
.pay-once-content h2{
	color: #e1f5ff;
	font-size: 0.32rem;
	line-height: 0.53rem;
	font-weight: normal;
}
.pay-once-content p{
	color: #fff;
	font-size: 0.24rem;
}
.pay-once-content	.circle-score{
	width: 0.86rem;
	height: 0.86rem;
	font-size: 0.32rem;
	color: #7efd95;
	line-height: 0.86rem;
	text-align: center;
	top: 0.18rem;
	right: 0.72rem;
	border-radius: 50%;
}
.pay-once-content	.circle-score .circle-text{
	top: 0.03rem;
	left: 0.21rem;
}
.pay-once-content	.circle-score span{
	font-size: 0.15rem;
}
.pay-once-text p{
	padding: 0.35rem 0.44rem 0.28rem 0.44rem;
	font-size: 0.28rem;
	margin: 0;
	line-height: 0.5rem;
	color: #666666;
}
.pay-once-text .grey-blank{
	height: 0.1rem;
	background-color: #f0eef4;
}
.pay-once-text h3{
	margin: 0;
	font-size: 0.3rem;
	font-weight: normal;
	line-height: 0.35rem;
	padding: 0.49rem 0.44rem 0.32rem 0.44rem;
}
.pay-once-text span{
	color: #3084fd;
}
.pay-once-text .nopadding{
	padding: 0 0.44rem 0.6rem 0.44rem;
	line-height: 0.5rem;
}
.pay-once-text h2{
	margin: 0;
	font-size: 0.34rem;
	color: #076cf7;
	line-height: 0.7rem;
	background-color: #f0eef4;
	text-align: center;
	font-weight: normal;
}
.pay-once-text button{
	width: 6.23rem;
	height: 0.86rem;
	background-color: #4a96fd;
	border-radius: 0.1rem;
	border: none;
	margin: 0.57rem auto 0;
	display: block;
	color: #fff;
	font-size: 0.3rem;
	line-height: 0.86rem;
}
</style>
